<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./js/template-web.js"></script>
</head>
<body>
  {{name}}
  <input type="text" id="key">
  <input type="button" value="搜索" id="btn">
  <h1>学生信息列表</h1>
  <table border="1" width="600">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>入学时间</th>
        <th>所属院校</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody align="center">
      {{if list.length != 0}}
        {{each list value}}
        <tr>
          <td>{{value.sno}}</td>
          <td>{{value.sname}}</td>
          <td>{{value.sage}}</td>
          <td>{{value.sgender}}</td>
          <td>{{value.stime}}</td>
          <td>{{value.dname}}</td>
          <td>
            <a href="/delstu?no={{value.sno}}" onclick="return confirm('您是否要删除')">删除</a>
            <a href="/edit?no={{value.sno}}">编辑</a>
          </td>
        </tr>
        {{/each}}
      {{else}}
        <tr>
          <td colspan="6">没有相关数据</td>
        </tr>
      {{/if}}
    </tbody>
  </table>
  <button><a href="/add">点击添加新学生</a></button>
  <script type="text/html" id="tpl">
    {#each data value#}
    <tr>
      <td>{#value.sno#}</td>
      <td>{#value.sname#}</td>
      <td>{#value.sage#}</td>
      <td>{#value.sgender#}</td>
      <td>{#value.stime#}</td>
      <td>{#value.dname#}</td>
      <td>
        <a href="/delstu?no={#value.sno#}" onclick="return confirm('您是否要删除')">删除</a>
        <a href="/edit?no={#value.sno#}">编辑</a>
      </td>
    </tr>
    {#/each#}
  </script>
  <script>
      //修改前端模板引擎解析标记为  {# #}
      template.defaults.rules[1].test = /{#([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*#}/;
    //1.在搜索按钮上注册点击事件
    document.getElementById("btn").onclick = function(){
      //2.获取关键词
      var keyword = document.getElementById("key").value;
      //发送ajax请求
      //1)实例化xhr对象
      var xhr = new XMLHttpRequest();
      //2)准备ajax请求
      xhr.open("get","/search?keyword=" + keyword);
      //3)发送Ajax请求
      xhr.send(null);
      xhr.onload =  function(){
        var result = JSON.parse(xhr.responseText)
        console.log(result);
        var tbodyStr = template("tpl",result)
        document.querySelector("tbody").innerHTML=tbodyStr
      }

    }
  
  </script>
</body>
</html>